<template>
	<el-dialog v-model="dialogUserVisible" title="用户信息" width="500px" draggable center>
		 <el-container>
		      <el-aside width="200px">
				   <el-avatar shape="square" :size="120" :src="userData.imageUrl" />
			  </el-aside>
		      <el-main>
				  <div>账号：{{userData.account}}</div>
				  <div>姓名：{{userData.name}}</div>
				  <div>性别：{{userData.sex}}</div>
				  <div>部门：{{userData.department}}</div>
				  <div>邮箱：{{userData.email}}</div>
				  <div>状态：
					<span v-if="userData.status==0">正常</span>
					<span v-else>冻结</span>
				  </div>
			  </el-main>
		</el-container>
		<el-footer>
			<span @click="openEdit(userData.id)">编辑</span>
			<span @click="openPromote(userData.id)">赋权</span>
			<span @click="openDelete(userData.id)">删除用户</span>
		</el-footer>
	</el-dialog>
	<promote ref="pro"></promote>
	<editi ref="editu"></editi>
	<deletei ref="deleteu"></deletei>
</template>

<script lang="ts" setup>
	import { reactive, ref ,toRefs} from 'vue'
	import { bus } from "@/utils/mitt.js"
	import promote from './promote.vue'
	import editi from './edit_user.vue'
	import deletei from './delete_admin.vue'
	
	// 对用户进行赋权
	const pro=ref()
	const openPromote=(id:number)=>{
		bus.emit('promoteId',id)
		pro.value.open()
	}
	
	// 对用户进行编辑
	const editu=ref()
	const openEdit=(id:number)=>{
		bus.emit('editId',id)
		editu.value.open()
	}
	// 对用户进行删除
	const deleteu=ref()
	const openDelete=(id:number)=>{
		let userInfor={
			id:id,
			account:userData.account,
			name:userData.name
		}
		bus.emit('deleteUserId',userInfor)
		deleteu.value.open()
	}
	bus.on('userId',(row:any)=>{
		userData.id=row.id
		userData.imageUrl=row.imageUrl
		userData.account=row.account
		userData.name=row.name
		userData.sex=row.sex
		userData.email=row.email
		userData.department=row.department
		userData.status=row.status
	})
	
	const userData=reactive({
		id:0,
		imageUrl:'',
		account:0,
		name:'',
		sex:'',
		email:'',
		department:'',
		status:0
	})
	
	bus.on('offDialog',(id:number)=>{
		if(id==1){
			dialogUserVisible.value=false
		}
	})
	// 弹窗开关
	const dialogUserVisible = ref(false)
	// 弹窗开关  创建管理员
	const open=()=>{
		dialogUserVisible.value=true
	}
	defineExpose({
		open
	})
</script>

<style lang="scss" scoped>
	.el-main>div{
		margin-bottom:8px;
	}
	.el-main{
		--el-main-padding:0px;
	}
	.el-footer{
		display:flex;
		justify-content: flex-end;
		--el-footer-height:8px;
		span{
			margin-left: 8px;
			color:#409eff;
			cursor:pointer
		}
	}
</style>